<fluent-design-system-provider background-color="#f7f7f7" use-defaults>
    <style>
        fluent-card {
            --card-width: 500px;
            --card-height: auto;
        }

        .card-padding {
            padding: 20px;
        }
    </style>

    <h1>Skeleton</h1>

    <h4>Used as element blocks</h4>
    <FluentCard class="card-padding">
        <FluentSkeleton style="border-radius: 4px; width: 50px; height: 50px;" Shape="Shape.Circle"></FluentSkeleton>
        <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect"></FluentSkeleton>
        <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect"></FluentSkeleton>
        <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect"></FluentSkeleton>
        <FluentSkeleton style="
                border-radius: 4px;
                width: 75px;
                height: 30px;
                margin-top: 20px;
                margin-bottom: 10px;
            "
                         Shape="Shape.Rect"></FluentSkeleton>
    </FluentCard>

    <h4>Used as element blocks with shimmer effect element</h4>
    <FluentCard class="card-padding">
        <FluentSkeleton style="border-radius: 4px; width: 50px; height: 50px;" Shape="Shape.Circle" Shimmer="true"></FluentSkeleton>
        <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect" Shimmer="true"></FluentSkeleton>
        <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect" Shimmer="true"></FluentSkeleton>
        <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect" Shimmer="true"></FluentSkeleton>
        <FluentSkeleton style="
                border-radius: 4px;
                width: 75px;
                height: 30px;
                margin-top: 20px;
                margin-bottom: 10px;
            "
                         Shape="Shape.Rect"
                         Shimmer="true"></FluentSkeleton>
    </FluentCard>

    <h4>Using SVG via Pattern attribute</h4>
    <FluentCard>
        <FluentSkeleton style="border-radius: 4px; width: 500px; height: 250px;"
                         Shape="Shape.Rect"
                         Pattern="https://static.fast.design/assets/skeleton-test-pattern.svg"
                         Shimmer="true"></FluentSkeleton>
    </FluentCard>

    <h4>Using inline SVG</h4>
    <FluentCard>
        <FluentSkeleton style="border-radius: 4px; width: 500px; height: 250px;" Shape="Shape.Rect" Shimmer="true">
            <svg style="position: absolute; left: 0; top: 0;" id="pattern" width="100%" height="100%">
                <defs>
                    <mask id="mask" x="0" y="0" width="100%" height="100%">
                        <rect x="0" y="0" width="100%" height="100%" fill="#ffffff" />
                        <rect x="0" y="0" width="100%" height="45%" rx="4" />
                        <rect x="25" y="55%" width="90%" height="15px" rx="4" />
                        <rect x="25" y="65%" width="70%" height="15px" rx="4" />
                        <rect x="25" y="80%" width="90px" height="30px" rx="4" />
                    </mask>
                </defs>
                <rect x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill="#ffffff" />
            </svg>
        </FluentSkeleton>
    </FluentCard>
</fluent-design-system-provider>